<template>
<div class="van-address-list bank-info-views">
  <div class="van-radio-group van-address-list__group">
    <div class="van-cell-group van-hairline--top-bottom">
      <!--<div v-for="(v,k) in pager" class="van-cell van-cell--clickable van-hairline" :key="k" @click="onClickBankInfo(v.user_bank_info_id)">-->
		  <div v-for="(v,k) in pager" class="van-cell van-cell--clickable van-hairline" :key="k">
        <span class="van-radio__label">
	        <div class="van-address-list__name">{{ v.name }}, {{ v.bank_name }}</div>
	        <div class="van-address-list__address">{{ v.bank_account }}</div>
	      </span>
        <i class="van-icon van-icon-edit van-address-list__edit"></i>
      </div>
    </div>

  </div>

  <router-link :to="{name:'userBankInfoCreate'}" class="van-hairline--top van-cell van-cell--clickable van-hairline van-address-list__add">
    <i class="van-icon van-icon-add van-cell__left-icon"></i>
    <div class="van-cell__title"><span>新增银行卡</span></div>
    <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
  </router-link>
</div>
</template>

<script>
import { AddressList } from 'vant';
import ajaxVant from '../../../utils/ajaxVant';
import auth from '../../../utils/auth';

export default {
  components: {
    [AddressList.name]: AddressList
  },
  data() {
    return {
      pager: {}
    };
  },
  methods: {
    getData() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/bankInfo?token=' + token).then(function(data) {
          if (data !== false) {
            _this.pager = data.pager;
          }
        });
      });
    },
    onClickBankInfo(id) {
      this.$router.push({ name: 'userBankInfoUpdate', params: { id: id }});
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style>
.bank-info-views .van-address-list__add {
  bottom: 48px;
}
</style>